DAY11:使用React Router實現前端路由

安裝React Router
首先，您需要安裝React Router。您可以使用npm或yarn執行以下命令：

npm install react-router-dom
或者
yarn add react-router-dom

創建路由

跟昨天的code結合。

import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

function Home() {
  return <h2>首頁</h2>;
}

function About() {
  return <h2>關於我們</h2>;
}

function App() {
  // 使用 localStorage 中的 count 值初始化狀態
  const initialCount = parseInt(localStorage.getItem('count')) || 0;
  const [count, setCount] = useState(initialCount);

  // 監聽 count 狀態的變化，並將其保存到 localStorage
  useEffect(() => {
    localStorage.setItem('count', count.toString());
  }, [count]);

  const handleIncrement = () => {
    // 使用閉包確保能夠獲取到最新的 count 值
    setCount(prevCount => prevCount + 1);
  };

  const handleDecrement = () => {
    // 使用閉包確保能夠獲取到最新的 count 值
    setCount(prevCount => prevCount - 1);
  };

  return (
    <div>
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Router>
      <div className='countContainer'>
        <p>Count: {count}</p>
        <button onClick={handleIncrement} className='add'>
          增加
        </button>
        <button onClick={handleDecrement} className='subtract'>
          減少
        </button>
      </div>
    </div>
  );
}

export default App;

/首頁

/about